<template>
  <div class="dashboard-container">
    <!-- <div class="app-container">目录管理</div> -->
    <!-- 新增目录按钮 -->
    <el-button type="primary" @click="AddDirectoryBox">新增目录</el-button>
    <!-- 卡片视图 -->
      <el-card>
        <el-form ref="DirectorysFormRef" :rules="DirectorysFormRules"  :model="DirectorysForm" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="目录名称" prop="directoryName">
                <el-input v-model="DirectorysForm.directoryName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="state">
                <el-input v-model="DirectorysForm.state"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button @click="ClearDirectorysData">清除</el-button>
              <el-button type="primary" @click="SearchDirectorysData">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 目录数据卡片视图 -->
      <el-card >
          <el-table :data="DirectorysList" >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              prop="directoryName"
              label="目录名称"
              width="180">
            </el-table-column>
            <!-- 创建者 -->
             <el-table-column
              prop="username"
              label="创建者"
              width="180">
            </el-table-column>
            <!-- 创建日期 -->
            <el-table-column label="创建日期" width="180">
                <template slot-scope="scope">
                  <div>
                      {{scope.row.addDate|parseTimeByString}}
                  </div>
                </template>
            </el-table-column>
            <!-- 面试题数量 -->
            <el-table-column
              prop="totals"
              label="面试题数量"
              width="100">
            </el-table-column>
            <!-- 状态 -->
            <el-table-column label="状态" width="80px"> 
              <template v-slot="scope">
                <div>
                  <el-link type="primary" v-if="scope.row.state==1">启用</el-link>
                  <el-link type="danger" v-else>禁用</el-link>
                </div>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              prop="state"
              label="操作"
              width="300">
              <template v-slot="scope">
                <div>
                  <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="scope.row.state==1 ? true : false" @click="ChangeDirectoryNameStatus(scope.row)">修改</el-button>
                  <el-button type="warning" icon="el-icon-magic-stick" size="mini" @click="ModifyDirectoryStatus(scope.row)">{{scope.row.state==1? '禁用':'启用'}}</el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="scope.row.state==1 ? true : false" @click="RemoveDirectoryStatus(scope.row.id)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页功能模块 -->
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="DirectorysForm.page"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="DirectorysForm.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Counts">
          </el-pagination>
      </el-card>
      <!-- 新增目录 -->
      <el-dialog title="新增目录" :visible.sync="AddDirectorysBox" width="30%">
        <el-form :model="AddDireData" :rules="AddDireDataRules" ref="AddDireDataRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="AddDireData.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="EnterAdd">确 定</el-button>
          <el-button @click="AddDirectorysBox = false">取 消</el-button>
          
        </span>
      </el-dialog>
      <!-- 修改目录信息dialog -->
      <el-dialog title="修改目录信息" :visible.sync="ChangeDirectorysBoxStatus" width="30%">
        <el-form :model="ChangeDirectorysMessage" :rules="ChangeDirectorysMessageRules" ref="ChangeDirectorysMessageRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="ChangeDirectorysMessage.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="EnterChange">确 定</el-button>
          <el-button @click="ChangeDirectorysBoxStatus = false">取 消</el-button>
        </span>
      </el-dialog>
  </div>
  
</template>

<script>

import { list as directoryList } from '@/api/hmmm/directorys.js'
import { add as AdddirectoryList } from '@/api/hmmm/directorys.js'
import { removes } from '@/api/hmmm/directorys.js'
import { remove} from '@/api/hmmm/directorys.js'
import { update } from '@/api/hmmm/directorys.js'
import { detail } from '@/api/hmmm/subjects.js'
import { parseTimeByString} from '@/filters/index.js'
export default {
  name: 'DirectorysList',
  data() {
    return {
      // 搜索框
      DirectorysForm:{
        // 目录名称
        directoryName:null,
        // 状态
        state:null,
        // 当前页数
        page:1,
        // 页数尺寸
        pagesize:10
      },
      // 
      DirectorysFormRules:{
        directoryName: [
            { required: true, message: '请输入目录名称', trigger: 'blur' },
            { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
          ],
           state: [
            { required: true, message: '请输入状态码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]

      },
      // 存放目录数据列表
      DirectorysList:[],
      // 目录的总数
      Counts:0,
      // 控制新增目录盒子的隐藏方式
      AddDirectorysBox:false,
      // 新增目录存放的数据
      AddDireData:{
        subjectID:2,
        directoryName:null
      },
      // 新增目录的验证规则
      AddDireDataRules:{
        directoryName:[
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ]
      },
      // 更改状态的数据
      ModifyDirectoryStatusData:{
        id:null,
        state:null
      },
      // 修改目录信息的显示与隐藏
      ChangeDirectorysBoxStatus:false,
      // 修改目录信息的数据
      ChangeDirectorysMessage:{
          id:null,
          subjectID:1,
          directoryName:null
      },
      // 修改目录信息的验证规则
      ChangeDirectorysMessageRules:{
          directoryName:[
            { required: true, message: '请输入目录名称', trigger: 'blur' },
            { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  created(){
    this.getDirectorysList()
  },
  methods:{
    async getDirectorysList(){
      // 发送请求获取目录数据 
      const {data:res} = await directoryList(this.DirectorysForm)
      this.DirectorysList=res.items
      this.Counts=res.counts
    },
    // 修改页数尺寸触发的事件
    handleSizeChange(val){
      this.DirectorysForm.pagesize=val
      this.getDirectorysList()
    },
    // 修改当前页面
    handleCurrentChange(val){
      this.DirectorysForm.page=val
      this.getDirectorysList()
    },
    // 搜索按钮
    SearchDirectorysData(){
      this.getDirectorysList()
    },
    // 重置表单
    ClearDirectorysData(){
      this.$refs.DirectorysFormRef.resetFields();
    },
    AddDirectoryBox(){
      this.AddDirectorysBox=true
    },
    // 进行目录的新增
    EnterAdd(){
      // 进行表单预验证
      this.$refs.AddDireDataRef.validate(async valid=>{
        if(valid==true){
          const res = await AdddirectoryList(this.AddDireData)
          console.log(res)
          if(res.status==200){
            this.getDirectorysList()
            // 让新增目录的disb
            this.AddDirectorysBox=false
          }
        }else{
          console.log('测试数据成功')
        }
      })
    },
    // 更改状态的执行语句
    async ModifyDirectoryStatus(row){
      console.log(row.state)
      this.ModifyDirectoryStatusData.state= row.state==1? 0 : 1 ;
      this.ModifyDirectoryStatusData.id=row.id
      console.log(this.ModifyDirectoryStatusData)
      const res = await removes(this.ModifyDirectoryStatusData)
      console.log(res)
      if(res.status==200){
        this.$message.success('状态修改成功')
        this.getDirectorysList()
      }
     
    },
    // 删除目录状态
    async RemoveDirectoryStatus(id){
      const resCode= await this.$confirm('此操作将永久删除该文件, 是否继续?', '删除目录操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).catch(err=>err)
      console.log(resCode)
      if(resCode!=='cancel'){
        // 发送请求
        const res = await remove({id:id})
        // 判断响应信息的status中的值是否为200 如果为200 则进行页面的重载
        if(res.status==200){
          this.getDirectorysList()
        }
      }else{
        this.$message.error('取消操作')
      }
      
    },
    // 点击修改按钮 显示按钮
    async ChangeDirectoryNameStatus(rows){
      this.ChangeDirectorysBoxStatus=true
      this.ChangeDirectorysMessage.id=rows.id
    },
    EnterChange(){
      this.$refs.ChangeDirectorysMessageRef.validate(async valid=>{
        if(valid!=true){
          alert('目录名称不符合规范')
        }
        const res = await update(this.ChangeDirectorysMessage)
        console.log(res)
        if(res.status==200){
          // 对页面进行重载
          this.getDirectorysList()
          // 对显示框进行隐藏
          this.ChangeDirectorysBoxStatus=false
        }
      })
    }
  }
}
</script>

<style scoped>
  .dashboard-container{
    margin: 10px;
  }
  .el-card{
    margin:10px 0;
  }  
  
</style>
